<template>
    <div class="container">
        <!-- 导航栏区域开始 -->
        <TridentNavBar>
            <template #left><i class="iconfont icon-zuojiantou"></i></template>
            <template #default>新的好友</template>
            <template #right><span @click="$router.push('/addFriend')">添加好友</span></template>
        </TridentNavBar>
        <!-- 导航栏区域结束 -->

        <!-- 搜索区域开始 -->
        <van-search
            placeholder="请输入手机号"
            input-align="center"
            class="search-wrap"
            @click="$router.push('/search')"
        />

        <!-- 新好友区域开始 -->
        <div class="new-friend-wrap">
            <div class="time">最近三天</div>
            <van-swipe-cell v-for="(item, index) in newFriendList" :key="index">
                <div class="friend-item">
                    <div class="left">
                        <div class="image-box">
                            <van-image
                                width="50"
                                height="50"
                                :src="item.applicant_info.avatar_url ? global.MINIO_FILE_DOMAIN + item.applicant_info.avatar_url : 'src/assets/images/default_avatar.png'"
                                fit="contain"
                            />
                        </div>
                        <div class="text-box">
                            <p class="username">{{ item.applicant_info.username }}</p>
                            <p class="desc">{{ item.apply }}</p>
                        </div>
                    </div>
                    <div class="right">
                        <div v-if="item.process_state == 0">
                            <span class="btn" @click="handleAgree(item.id)">同意</span>
                            <span class="btn" @click="handleReject(item.id)">拒绝</span>
                        </div>
                        <div v-else-if="item.process_state == 1">
                            <van-tag color="#aba7a7" type="success" size="large">已同意</van-tag>
                        </div>
                        <div v-else>
                            <van-tag color="#aba7a7" type="success" size="large">已拒绝</van-tag>
                        </div>
                    </div>
                </div>
                <template #right>
                    <van-button square text="删除" type="danger" style="height: 100%;" @click="handleDelete(item.id)" />
                </template>
            </van-swipe-cell>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { reqAgreeFriendApplyAPI, reqDeleteFriendApplyAPI, reqEditFriendApplyAPI, reqFriendApplyListAPI } from '@/apis/friendApply'
import { useCommonStore } from '@/store/modules/common'
import { useUserStore } from '@/store/modules/user'
import type { FriendApply, FriendApplyListParams } from '@/types/friendApply'
import { showConfirmDialog, showSuccessToast } from 'vant'
import { inject, onMounted, ref } from 'vue'

// 全局属性
const global: any = inject('global')

// 用户存储
const userStore = useUserStore()

const newFriendList = ref<FriendApply[]>([])

onMounted(async () => {
    await getFriendApply()
})

// ------------------ 申请列表功能开始 ------------------
// 申请列表参数
const params = ref<FriendApplyListParams>({
    respondent_id: userStore.profile.user.uid,
    status: "1",
    page: 1
})
// 获取好友申请
const getFriendApply = async () => {
    const result = await reqFriendApplyListAPI(params.value)
    newFriendList.value = result.data.friend_applies
}
// ------------------ 申请列表功能结束 ------------------



// ------------------ 处理同意申请开始 ------------------
const handleAgree = async (id: number) => {
    await reqAgreeFriendApplyAPI(id)
    const friendApply = newFriendList.value.find((item: FriendApply) => item.id == id)
    friendApply.process_state = 1
    showSuccessToast('同意申请成功')

    // 更新好友申请数量
    const commonStore = useCommonStore()
    const total = commonStore.friendApplyTotal - 1
    commonStore.setFriendApplyTotal(total)
}
// ------------------ 处理同意申请结束 ------------------



// ------------------ 处理拒绝申请开始 ------------------
const handleReject = (id: number) => {
    showConfirmDialog({
        confirmButtonColor: '#27BA9B',
        message:'确定要拒绝好友申请吗?',
    }).then(async () => {
        await reqEditFriendApplyAPI({id, process_state: -1})
        const friendApply = newFriendList.value.find((item: FriendApply) => item.id == id)
        friendApply.process_state = -1
        showSuccessToast('拒绝申请成功')

        // 更新好友申请数量
        const commonStore = useCommonStore()
        const total = commonStore.friendApplyTotal - 1
        commonStore.setFriendApplyTotal(total)
    }).catch(() => {
        // on cancel
    })
}
// ------------------ 处理拒绝申请结束 ------------------



// ------------------ 处理删除申请开始 ------------------
const handleDelete = async (id: number) => {
    showConfirmDialog({
        confirmButtonColor: '#27BA9B',
        message:'确定要删除好友申请吗?',
    }).then(async () => {
        await reqDeleteFriendApplyAPI(id +'')
        const index = newFriendList.value.findIndex((item: FriendApply) => item.id == id)
        newFriendList.value.splice(index, 1)
        showSuccessToast('删除申请成功')
    }).catch(() => {
        // on cancel
    })
}
// ------------------ 处理删除申请结束 ------------------
</script>

<style scoped lang="scss">
page,
.container {
    height: 100vh;

    // 内容区域开始
    .search-wrap {
        position: fixed;
        top: 45px;
        left: 0;
        width: 100%;
        z-index: 100;
    }

    // 新好友区域开始
    .new-friend-wrap {
        margin-top: 104px;
        .time {
            padding: 15px;
            color: #27BA9B;
            font-weight: bold;
        }
        
        .friend-item {
            padding: 15px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            background-color: #fff;
            margin-bottom: 5px;
            .left {
                flex: 1;

                display: flex;
                align-items: center;
                .image-box {
                    width: 50px;
                    height: 50px;
                    line-height: 50px;
                    border-radius: 5px;
                    text-align: center;
                    overflow: hidden;
                    border: 1px solid #ebeaea;
                }
                .text-box {
                    flex: 1;
                    margin-left: 10px;
                    .username {
                        font-size: 17px;
                    }
                    .desc {
                        font-size: 13px;
                        color: #aba7a7;
                        line-height: 20px;
                    }
                }
            }
            .right {
                width: 120px;
                display: flex;
                justify-content: flex-end;
                .btn {
                    padding: 2px 10px;
                    border: 1px solid #27BA9B;
                    border-radius: 4px;
                    color: #27BA9B;
                    &:last-child {
                        margin-left: 10px;
                        border: 1px solid red;
                        color: red;
                    }
                }
            }
        }
        padding-bottom: 5px;
    }
}
</style>